<template>
	<!-- 活动详情 -->
	<view class="activitydetail-container">
		<!-- 自定义头部导航栏 -->
		<MyHeader>
			<!-- 标题 -->
			<template #title>
				<view>活动详情</view>
			</template>
			<!-- 右侧图标 -->
			<template #right>
				<view style="width: 38rpx; height: 38rpx;">
					<button
						style="width: 100%; height: 100%; background-color: transparent; border: none; margin: 0; padding: 0; line-height: 0; display: flex; justify-content: center; align-items: center;"
						open-type="share">
						<image style="width: 100%;" src="/static/img/activityList/share.png" mode="widthFix"></image>
					</button>

				</view>
			</template>
		</MyHeader>

		<!-- 内容区 -->
		<view class="content">
			<!-- 主图 -->
			<view class="img">
				<image :src="detail.image_path"></image>
			</view>
			<!-- 标题和报名 -->
			<view class="wrap">
				<view class="title">{{detail.name}}</view>
				<view class="b">
					<view>仅限校友报名</view>
					<view class="signup_counts">已报名：{{detail.signup_counts}}人</view>
				</view>
			</view>
			<!-- 归属 -->
			<view class="wrap1">
				<view class="img">
					<image src="/static/img/activityList/logo.png" mode="widthFix"></image>
				</view>
				<view class="r">
					<view class="t">辽宁大学校友会</view>
					<view class="b">
						<view class="username">发起人：{{detail.username}}</view>
						<view class="username">
							活动费用：<text class="price">{{detail.parse?detail.parse:'0.00'}}元</text>
						</view>
					</view>
				</view>
			</view>

			<view class="item">
				<view class="l">活动开始时间</view>
				<view class="r">{{detail.start_at}}</view>
			</view>
			<view class="item">
				<view class="l">活动结束时间</view>
				<view class="r">{{detail.end_at}}</view>
			</view>
			<view class="item">
				<view class="l">报名开始时间</view>
				<view class="r">{{detail.signup_start_at}}</view>
			</view>
			<view class="item">
				<view class="l">报名结束时间</view>
				<view class="r">{{detail.signup_end_at}}</view>
			</view>
			<view class="item">
				<view class="l">活动地点</view>
				<view class="r">-</view>
			</view>
			<view class="item">
				<view class="l">联系方式</view>
				<view class="r">{{detail.contact_mobile}}</view>
			</view>

			<view class="detail">
				<view class="title">活动详情</view>
				<view class="content" v-html="detail.detail"></view>
			</view>

		</view>

		<!-- 底部按钮 -->
		<BottomButton @setHandleBtn="getHandleBtn"
			:bgColor="detail.signup_status==2?'#275BA8':detail.signup_status==3?'rgba(234,0,0,.1)':'rgba(153,153,153,.1)'">
			<template>
				<view>{{detail.signup_status==2?'立即报名':signup_status==3?'报名已结束':'活动已结束'}}</view>
			</template>
		</BottomButton>
	</view>
</template>
<script>
	import MyHeader from '@/componets/MyHeader/MyHeader.vue'
	import BottomButton from '@/componets/BottomButton/BottomButton.vue'
	export default {
		data() {
			return {
				// 活动id
				id: '',
				// 活动详情
				detail: {}
			}
		},
		onLoad(options) {
			if (!options.id) return uni.navigateBack()
			this.id = options.id
			this.getActivityDetail()
		},
		methods: {

			/**
			 * 点击报名按钮
			 */
			getHandleBtn() {
				if (this.detail.signup_status != 2) return
				uni.navigateTo({
					url: `/pages/Application/Application?detail=${JSON.stringify(this.detail)}&id=${this.id}`
				})
			},

			/**
			 * 获取活动详情
			 */
			getActivityDetail() {
				this.$request.post({
					url: '/api/activity/detail',
					data: {
						id: this.id
					},
					success: res => {
						if (res.code != 200) return uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.detail = res.result
						console.log(res, 'res')
					}
				})
			}
		},
		components: {
			MyHeader,
			BottomButton
		}
	}
</script>

<style lang="less" scoped>
	.activitydetail-container {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		padding-bottom: 258rpx;
		box-sizing: border-box;

		>.content {
			width: 100%;

			>.img {
				width: 100%;

				>image {
					width: 100%;
				}
			}

			>.wrap {
				width: 100%;
				height: 144rpx;
				background-color: #fff;
				border-bottom: 2rpx solid #F1F1F1;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				padding: 0 20rpx;
				box-sizing: border-box;


				>.title {
					font-size: 32rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					line-height: 46rpx;
				}

				>.b {
					font-size: 24rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					line-height: 34rpx;
					display: flex;
					align-items: center;

					>.signup_counts {
						margin-left: 28rpx;
					}
				}
			}

			.wrap1 {
				width: 100%;
				height: 136rpx;
				background-color: #fff;
				border-bottom: 2rpx solid #F1F1F1;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				box-sizing: border-box;

				>.img {
					width: 88rpx;
					height: 88rpx;
					margin-right: 20rpx;

					>image {
						width: 100%;
					}
				}

				>.r {
					flex: 1;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;

					>.t {
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #333333;
						line-height: 40rpx;
						letter-spacing: 1px;
					}

					>.b {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						>.username {
							font-size: 24rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #666666;
							line-height: 34rpx;
							letter-spacing: 1px;

							>.price {
								color: #275BA8;
							}
						}

					}
				}
			}

			.item {
				width: 100%;
				height: 88rpx;
				background-color: #fff;
				border-bottom: 2rpx solid #F1F1F1;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				box-sizing: border-box;

				>.l {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
					margin-right: 20rpx;
				}

				>.r {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
				}
			}

			.detail {
				width: 100%;
				background-color: #fff;
				padding: 0 20rpx;
				box-sizing: border-box;

				>.title {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
					margin-top: 30rpx;
				}

				>.content {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					line-height: 48rpx;
					margin-top: 30rpx;
				}
			}
		}
	}

	// .head {
	// 	width: 100vw;
	// 	height: 88rpx;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	padding-right: 32rpx;
	// 	box-sizing: border-box;
	// 	font-size: 36rpx;
	// 	color: #353535;
	// 	background: #fff;
	// 	z-index: 111;

	// 	.img {
	// 		width: 48rpx;
	// 		height: 48rpx;
	// 	}
	// }

	// .content {
	// 	padding: 88rpx 0 180rpx 0;

	// 	.school_img {
	// 		width: 100%;
	// 	}

	// 	.title {
	// 		font-size: 32rpx;
	// 		padding: 20rpx;
	// 		box-sizing: border-box;
	// 	}

	// 	.num {
	// 		font-size: 24rpx;
	// 		padding: 0 20rpx 20rpx 20rpx;
	// 		box-sizing: border-box;
	// 		border-bottom: 2rpx solid #F6F6F6;
	// 	}

	// 	.school {
	// 		width: 100%;
	// 		padding: 20rpx;
	// 		box-sizing: border-box;
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: space-between;
	// 		border-bottom: 2rpx solid #F6F6F6;

	// 		.school_img {
	// 			width: 88rpx;
	// 			height: 88rpx;
	// 		}

	// 		.school_right {
	// 			flex: 1;
	// 			padding-left: 20rpx;

	// 			.school_title {
	// 				font-size: 28rpx;
	// 			}

	// 			.school_text {
	// 				font-size: 24rpx;
	// 				color: #666666;
	// 				display: flex;
	// 				align-items: center;
	// 				justify-content: space-between;
	// 			}

	// 			.price {
	// 				color: #275BA8
	// 			}
	// 		}
	// 	}

	// 	.time {
	// 		padding: 20rpx;
	// 		box-sizing: border-box;
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: space-between;
	// 		border-bottom: 2rpx solid #F6F6F6;

	// 		.name {
	// 			font-size: 28rpx;
	// 		}

	// 		.text {
	// 			flex: 1;
	// 			padding-left: 20rpx;
	// 			font-size: 28rpx;
	// 		}
	// 	}

	// 	.details {
	// 		padding: 20rpx;
	// 		font-size: 28rpx;

	// 		.text {
	// 			margin-top: 20rpx;
	// 		}
	// 	}
	// }

	// .footer {
	// 	height: 160rpx;
	// 	background: #FFFFFF;
	// 	box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(140, 140, 140, 0.302);
	// 	border-radius: 0rpx 0rpx 0rpx 0rpx;
	// 	width: 100%;
	// 	position: fixed;
	// 	bottom: 0;
	// 	left: 0;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;

	// 	.btn {
	// 		width: 710rpx;
	// 		height: 80rpx;
	// 		background: url(/static/img/activityList/red.png);
	// 		background-size: 100% 100%;
	// 		line-height: 80rpx;
	// 		text-align: center;
	// 		color: #fff;
	// 		font-size: 32rpx;
	// 	}
	// }
</style>